<template>
  <el-descriptions title="我的详细资料" :column="1" border>
    <el-descriptions-item label="用户名" label-class-name="my-label" class-name="my-content" width="150px">{{userData.username}}</el-descriptions-item>
    <el-descriptions-item label="真实姓名" label-class-name="my-label" class-name="my-content" width="150px">{{userData.realname}}</el-descriptions-item>
    <el-descriptions-item label="电话" label-class-name="my-label" class-name="my-content" width="150px">{{userData.phone}}</el-descriptions-item>
    <el-descriptions-item label="最近登录时间" label-class-name="my-label" class-name="my-content" width="150px">{{userData.gmtLastLogin}}</el-descriptions-item>
    <el-descriptions-item label="角色" label-class-name="my-label" class-name="my-content" width="150px">{{userData.roles}}</el-descriptions-item>
    <el-descriptions-item label="状态" label-class-name="my-label" class-name="my-content" width="150px">
      <el-button type="primary">{{userData.status?'正常':'异常'}}</el-button>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script>
import { mapState } from "vuex" //引入辅助函数
export default {
  computed: {
    // 使用对象展开运算符简化对象
    ...mapState({
      userData: state => state.Admin.userData
    })
  }
}
</script>

<style lang="less" scoped>
.my-label {
  background: var(--el-color-success-light-9);
}
.my-content {
  background: var(--el-color-danger-light-9);
}
</style>